<template>
  <div>
    <page-header></page-header>

    <div class="page-body">
      <div class="page-body1">
        <page-side></page-side>
      </div>
      <div class="page-body2">
        <div class="shopdetail">
          <div class="shop_left">
            <img class="shop_left_img" src="/static/shopcard/1.jpg" alt>
          </div>
          <div class="shop_right">
            <div class="shop_right_ch shop_right_ch_goodsname">
              <img class="shop_right_ch_img" src="/static/shopdetail/goods.png">商品名:
              <div class="shop_right_ch_content shop_right_ch_content_goodsname">{{goodsDetailData.title}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/price.png">价格￥:
              <div class="shop_right_ch_content">{{goodsDetailData.price}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/username.png">用户名:
              <div class="shop_right_ch_content">admin</div>
              <!--<span>-->
                <!--<a href>查看资料</a>-->
              <!--</span>-->
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/qq.png">QQ:
              <div class="shop_right_ch_content">{{goodsDetailData.qq}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/wechat.png">微信：
              <div class="shop_right_ch_content">{{goodsDetailData.wechat}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/phone.png">号码：
              <div class="shop_right_ch_content">{{goodsDetailData.mobile}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/address.png">地址：
              <div class="shop_right_ch_content">{{goodsDetailData.address}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/goodscertification.png">商品认证状态：
              <div class="shop_right_ch_content">{{goodsDetailData.status===1 ?'已认证':'未认证'}}</div>
            </div>
            <!--<div class="shop_right_ch">-->
              <!--<img class="shop_right_ch_img" src="/static/shopdetail/membercercification.png">会员身份状态：-->
              <!--<div class="shop_right_ch_content">{{goodsDetailData.status===1 ?'已认证':'未认证'}}</div>-->
            <!--</div>-->
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/date.png">发布时间：
              <div class="shop_right_ch_content">{{restime}}</div>
            </div>
            <div class="shop_right_ch">
              <img class="shop_right_ch_img" src="/static/shopdetail/discuss.png">是否可议价：
              <div class="shop_right_ch_content">是</div>
            </div>
          </div>
          <div class="shop_end">
            <div v-for="(item,index) of goodsImgData" :key="index">
              <img class="shop_end-img" :src="item.imgurl">
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <!-- 商品描述 -->
        <div class="goods_discribe">
          <div class="goods_discribe_title">商品描述:</div>
          <div class="goods_discribe_content">
            <div>{{goodsDetailData.describe}}</div>
            <p class="goods_discribe_content2">联系我时，请注明是在林科大涉外二手交易市场看到我的哦！</p>
          </div>
        </div>
        <!-- 评论模块 -->
        <div class="remark">
          <div class="remark_title">评论:</div>
          <div class="remark_user">
            <div class="remark_user_left">
              <img class="remark_userimg" src="/static/shopcard/3.jpg">
              <span>某人说:</span>
            </div>
            <div class="remark_user_right">2019-1-22</div>
          </div>
          <div class="remark_content">这是一个不错的商品呀</div>
          <div class="remark_content">全部回复：</div>
          <div class="remark_content">1楼：你的眼光真不错</div>
          <div class="remark_active">
            <span class="remark_active1">回复</span>
            <span class="remark_active1">举报</span>
            <span class="remark_active1">
              <img class="remark_active1_img" src="/static/shopdetail/dianzan.png" alt>(123)
            </span>
          </div>
        </div>

        <page-footer></page-footer>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/pages/pageheader'
import PageSide from '@/components/pages/PageSide'
import PageContent from '@/components/pages/PageContent'
import PageFooter from '@/components/pages/PageFooter'
import remove from '@/utils/http'
import getHeader from '@/utils/header'

export default {
  name: 'ShopDetail',
  components: { PageHeader, PageSide, PageContent, PageFooter },
  data () {
    return {
      /** 从上一个页面传过来的值 **/
      fromgoodsindexdata: '',
      /** 商品详情数据****/
      goodsDetailData: {},
      /** 商品图片信息**/
      goodsImgData: [],
      /** **** 用户数据***   */
      userdata: {}
    }
  },
  created () {
    this.getShopDetail()
  },
  computed: {
    restime: function () {
      let time = (this.goodsDetailData.time) * 1000
      let timedate = new Date(time)
      let years = timedate.getFullYear()
      let months = timedate.getMonth() + 1
      let day = timedate.getDate()
      let formattime = `${years}年${months}月${day}日`
      return formattime
    }
  },
  methods: {
    getShopDetail () {
      // 1、接收从上一级页面传过来的id值
      this.fromgoodsindexdata = this.$route.query.id
      // 2、根据穿过来的id值去发请求从而得到相应的数据
      remove('gooslistdetail', false, {id: this.fromgoodsindexdata}).then(res => {
        if (res.code === 0) {
          this.goodsDetailData = res.detail
          console.log(this.goodsDetailData, '商品的文字数据')
          this.goodsImgData = res.image.map(item => {
            return {imgurl: 'http://www.kkw.com/upload/' + item.path}
          })
          console.log(this.goodsImgData, '商品的图片数据')
          this.userdata = res.userdata
          console.log(this.userdata, '用户的数据')
        }
      })
    }
  }
}
</script>

<style scoped>
/* ------------------------评论模块----------------------------------- */
.remark {
  margin-top: 10px;
  border: 2px solid #1296db;
  padding: 20px 80px;
  border-radius: 5px;
}
.remark_title {
  font-size: 18px;
  font-weight: bold;
  width: 100px;
  height: 36px;
  margin-left: -80px;
  text-align: center;
  line-height: 36px;
  color: white;
  margin-bottom: 10px;
  background-color: #1296db;
}
.remark_user {
  font-size: 15px;
  display: flex;
  align-items: center;
}
.remark_userimg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}
.remark_user_left {
  width: 90%;
}
.remark_user_right {
  width: 10%;
}
.remark_content {
  padding-left: 50px;
  font-size: 14px;
}
.remark_active {
  display: flex;

  padding-right: 30px;
  justify-content: flex-end;
}
.remark_active1 {
  width: 60px;
  border: 1px solid #1296db;
  text-align: center;
  border-radius: 2px;
}
.remark_active1_img {
  width: 13px;
  height: 12px;
}
/* -----------------------页面样式----------------------------------- */
.line {
  height: 15px;
  background-color: #999999;
}
.shopdetail {
  display: flex;
  border: 2px solid #1296db;
  margin-bottom: 10px;
}
.shop_left_img {
  padding: 10px 50px;
  width: 500px;
  height: 500px;
}
.shop_right_ch {
  display: flex;
  padding: 9px 10px;
  font-size: 16px;
  align-items: center;
}
.shop_right_ch_goodsname {
  font-size: 18px;
}
.shop_right_ch_content {
  padding-left: 6px;
}
.shop_right_ch_content_goodsname {
  font-weight: bold;
}
.shop_right_ch_img {
  width: 30px;
  height: 30px;
  padding-right: 10px;
}
.shop_end{
  background: aqua;
}
.shop_end-img{
  width: 130px;
  height: 130px;
}
/* ----------------商品详细描述-------------------------- */
.goods_discribe {
  padding: 20px 80px;
  border: 2px solid #1296db;
  border-radius: 5px;
}
.goods_discribe_title {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
  margin-left: -80px;
  color: white;
  width: 100px;
  height: 36px;
  background-color: #1296db;
  text-align: center;
  line-height: 36px;
  /* padding-bottom: 10px; */
}
.goods_discribe_content {
  font-size: 15px;
}

.page-body {
  padding-top: 80px;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  width: 98%;
}
.page-body1 {
  width: 13%;
}
.page-body2 {
  width: 87%;
}
</style>
